<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  	<meta property="og:title" content=" 语法 &middot;  我的博客" />
  	<meta property="og:site_name" content="我的博客" />
  	<meta property="og:url" content="/my_technology/t/" />
    
    
  	<meta property="og:type" content="article" />

    <meta property="og:article:published_time" content="2018-04-11T17:34:50&#43;08:00" />

    
    

  <title>
     语法 &middot;  我的博客
  </title>

    <meta name="description" content="这里是付佳康的个人博客" />

    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="/my_technology/images/favicon.ico">
	  <link rel="apple-touch-icon" href="/my_technology/images/apple-touch-icon.png" />
    
    <link rel="stylesheet" type="text/css" href="/my_technology/css/screen.css" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400|Inconsolata" />


    
      
          <link href="/my_technology/index.xml" rel="alternate" type="application/rss+xml" title="我的博客" />
      
      
    
    <meta name="generator" content="Hugo 0.68.3" />

    <link rel="canonical" href="/my_technology/t/" />

     
</head>
<body class="nav-closed">
<div id="particles-js"></div>
  


 <div class="site-wrapper">



<header class="main-header " style="background-image: url(/my_technology/images/user.jpg)">

    <nav class="main-nav overlay clearfix">
        
            <a class="blog-logo" href="/my_technology/"><img src="/my_technology/images/user.png" alt="Blog Logo" /></a>
        
        
    </nav>
<div class="vertical">
        <div class="main-header-content inner">
            <h1 class="page-title">
              <a class="btn-bootstrap-2" href="#content">我的博客</a>
          </h1>
          <h2 class="page-description">这里是付佳康的个人博客</h2>
        </div>
</div>
    <a class="scroll-down icon-arrow-left" href="#content"><span class="hidden">Scroll Down</span></a>
</header>

  <main id="content" class="content" role="main">


  <article class="post ">

    <header class="post-header">
        <h1 class="post-title">语法</h1>
        <section class="post-meta">
        
         
        </section>
    </header>

    <section class="post-content">
      <pre><code>v-model:
    v-model是用于表单输入的数据双向绑定。所谓双向绑定就是视图层的数据变化会引起数据层数据的改变，相反的，数据层的变化也会导致视图层展示数据的变化。

class绑定：
    &lt;div :class=&quot;{ active:isActive }&quot;&gt;动态添加class&lt;/div&gt;
    &lt;div :class=&quot;classObj&quot;&gt;class绑定对象&lt;/div&gt;
    &lt;div :class=&quot;classArray&quot;&gt;class绑定数组&lt;/div&gt;
    &lt;div :class=&quot;active:isActive&quot;&gt;class绑定计算，isActive是一个计算&lt;/div&gt;
条件渲染：
    v-if; v-else if; v-else


v-show可以做频繁重复性的显示/隐藏交替设置
    &lt;h1 v-show=&quot;ok&quot;&gt;v-show指令也可以控制显示隐藏元素&lt;/h1&gt;

v-show和v-if的区别：
    v-show会渲染dom树，其元素的display属性受条件的控制显示隐藏元素；
    v-show不支持template元素
    v-if根据条件判断是否渲染dom数

列表渲染：v-for的优先级大于v-if
    &lt;ul&gt;
        &lt;li v-for=&quot;(item,index) in tlist&quot;&gt;
            {{item.text}}}
        &lt;/li&gt;
    &lt;/ul&gt;

v-text:
    将内容按照文本格式进行插入，但会覆盖原有标签内的内容，不会有加载的闪烁问题.

v-html:
    将内容按照html格式进行插入.

v-clock:
    解决加载时的闪烁问题,这个指令可以隐藏未编译的标签直到实例准备完毕
绑定属性.

v-bind:
    可缩写为：:bind

v-on :
    用于监听事件，如按钮的点击事件。v-on 的简写为 @,如下面的 @click 就等价为 v-on:click。


</code></pre>
    </section>


  <footer class="post-footer">


    
    <figure class="author-image">

        <a class="img" href="/my_technology/" style="background-image: url(/my_technology/images/user.png)"><span class="hidden">付佳康</span></a>
    </figure>
    

    <section class="author">

  <p>付佳康</p>
  

</section>


    
    <section class="share">
      <h4>Share this page</h4>
      <a class="icon-twitter" style="font-size: 1.4em" href="https://twitter.com/share?text=%e8%af%ad%e6%b3%95&amp;url=%2fmy_technology%2ft%2f"
          onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
          <span class="hidden">Twitter</span>
      </a>
      <a class="icon-facebook" style="font-size: 1.4em" href="https://www.facebook.com/sharer/sharer.php?u=%2fmy_technology%2ft%2f"
          onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
          <span class="hidden">Facebook</span>
      </a>
      <a class="icon-google-plus" style="font-size: 1.4em" href="https://plus.google.com/share?url=%2fmy_technology%2ft%2f"
         onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
          <span class="hidden">Google+</span>
      </a>
    </section>
    

    
    
    

  </footer>
</article>

</main>
    <footer class="site-footer clearfix">
        <section class="copyright"><a href="">我的博客</a> </section>
        
        <section class="poweredby">Proudly generated by <a class="icon-hugo" href="https://gohugo.io">HUGO</a>, with <a class="icon-theme" href="https://github.com/syui/hugo-theme-air">hugo-theme-air</a> theme</section>
        
    </footer>
    </div>
    <script type="text/javascript" src="/my_technology/js/jquery.js"></script>
    <script type="text/javascript" src="/my_technology/js/jquery.fitvids.js"></script>
    <script type="text/javascript" src="/my_technology/js/index.js"></script>
    <script src="/my_technology/js/particles.min.js"></script>
    <script src="/my_technology/js/particles.js"></script>  

</body>
</html>

